<!-- 我是评价 -->
<template lang="html">
  <div class="evaluateBox">
    <el-row class="bg-white">
      <el-col :span="2" >
        <div :class="goodsTab==1?'goodsList active':'goodsList'">
          评价回访
        </div>
      </el-col>
    </el-row>

    <div class="warp">
      <el-row class="formBox box1">
          <el-col :span="2" class="text-right headLable">
            <span>产品名：</span>
          </el-col>
          <el-col :span="4" class="text-left">
            <el-input v-model="productName" size="small" class="text" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="2" class="text-right">
            <span>评论时间：</span>
          </el-col>
          <el-col :span="8" class="text-left">
              <el-date-picker
                size="small"
                v-model="commentTimeBegin"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
              <span>至</span>
              <el-date-picker
                size="small"
                v-model="commentTimeEnd"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
          </el-col>
          <!-- <el-col :span="2" class="text-right">
            <span>售卖渠道：</span>
          </el-col>
          <el-col :span="4" class="text-left">
            <el-select v-model="value" size="small" placeholder="请选择" class="text">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col> -->
      </el-row>
      <el-row class="formBox">
        <el-col :span="2" class="text-right headLable">
          <span>商家名：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="businessmenName" class="text" size="small" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>评分：</span>
        </el-col>
        <el-col :span="8" class="text-left">
          <el-radio-group class="redioBox" v-model="star" size="small">
            <el-radio :label="4">全部</el-radio>
            <el-radio :label="3">3</el-radio>
            <el-radio :label="2">2</el-radio>
            <el-radio :label="1">1</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row class="formBox box2">
         <el-col :span="2" class="text-left" style="margin-left:80px;">
           <el-button type="success" size="small" @click="filter" >筛选</el-button>
         </el-col>
      </el-row>

      <el-row class="tableBox">
        <el-tabs v-model="activeName" type="card" @tab-click="handleTabsEdit">
            <el-tab-pane label="未回访差评" name="one" v-loading.body="$store.state.TanEvaluate.loading">
              <ul class="listBox">
                  <li class="first">
                    <span class="product gray">
                      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" class="check gray" >产品名</el-checkbox>
                    </span>
                    <span class="score gray">评分</span>
                    <span class="content gray">评论内容 / 订单号</span>
                    <span class="name gray">商家名</span>
                    <span class="customer gray">客户</span>
                    <span class="recommend gray">优质</span>
                    <span class="time gray">评论时间↓</span>
                    <span class="operation gray">操作</span>
                  </li>
                <el-checkbox-group v-model="checkedArr" @change="handleCheckedArrChange">
                  <li v-for="item in $store.state.TanEvaluate.evaluateList.result">
                    <span class="product">
                      <el-checkbox class="check" :label="item.id" :key="item.id">{{item.productName}}</el-checkbox>
                      <p class="gray" style="margin-top:5px;">{{item.orderNo}}</p>
                    </span>
                    <span class="score">{{item.star?item.star:'0'}}</span>
                    <span class="content text-left">{{item.content}}</span>
                    <span class="name text-left">{{item.businessmenName}}</span>
                    <span class="customer text-left">
                      <p>{{item.customerName}}</p>
                      <p>{{item.customerMobile}}</p>
                    </span>
                    <span class="recommend text-left">
                      <p>{{item.isRecommendDesc}}</p>
                    </span>
                    <span class="time">
                      <p>{{item.commentTime | getDate}}<br>{{item.commentTime | getTime}}</p>
                    </span>
                    <span class="operation green" @click="changeDialog(1,item.id,item)">{{item.commentStatusName}}</span>
                  </li>
                </el-checkbox-group>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="全部" name="two" v-loading.body="$store.state.TanEvaluate.loading">
              <ul class="listBox">
                  <li class="first">
                    <span class="product gray">
                      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" class="check gray" >产品名</el-checkbox>
                    </span>
                    <span class="score gray">评分</span>
                    <span class="content gray">评论内容 / 订单号</span>
                    <span class="name gray">商家名</span>
                    <span class="customer gray">客户</span>
                    <span class="recommend gray">优质</span>
                    <span class="time green">评论时间↓</span>
                    <span class="numb gray">回访数</span>
                    <span class="operation gray">状态</span>
                  </li>
                <el-checkbox-group v-model="checkedArr" @change="handleCheckedArrChange">
                  <li v-for="item in $store.state.TanEvaluate.evaluateList.result">
                    <span class="product">
                      <el-checkbox class="check" :label="item.id" :key="item.id">{{item.productName}}</el-checkbox>
                      <p class="gray" style="margin-top:5px;">{{item.orderNo}}</p>
                    </span>
                    <span class="score">{{item.star?item.star:'0'}}</span>
                    <span class="content text-left">{{item.content}}</span>
                    <span class="name text-left">{{item.businessmenName}}</span>
                    <span class="customer text-left">
                      <p>{{item.customerName}}</p>
                      <p>{{item.customerMobile}}</p>
                    </span>
                    <span class="recommend text-left">
                      <p>{{item.isRecommendDesc}}</p>
                    </span>
                    <span class="time">
                      <p>{{item.commentTime | getDate}}<br>{{item.commentTime | getTime}}</p>
                    </span>
                    <span class="numb gray">{{item.replyCount?item.replyCount:'0'}}</span>
                    <span class="operation" @click="changeDialog(1,item.id,item)">{{item.commentStatusName}}</span>
                  </li>
                </el-checkbox-group>
              </ul>
            </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-row style="margin-top:10px;">
        <el-col :span="2">
          <el-button size="small" type="success" @click="noNeedToReply()">无需回访</el-button>
        </el-col>
        <el-col :span="3">
          <el-button size="small" type="success" @click="setRecommend()">标记为优质点评</el-button>
        </el-col>
        <el-col :span="2">
          <el-button size="small" type="danger" @click="setHidden()">列表隐藏</el-button>
        </el-col>
      </el-row>
      <el-row style="padding-bottom:10px; padding-right:0px;" class="text-right">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageIndex"
          :page-size="pageSize"
          :page-count="$store.state.TanEvaluate.pages"
          layout="prev, pager, next, jumper">
        </el-pagination>
      </el-row>
    </div>

    <!-- 弹出框 -->
    <el-dialog :title="$store.state.TanEvaluate.title" :visible.sync="$store.state.TanEvaluate.TanVisible">
      <v-back v-if="$store.state.TanEvaluate.TanType==1"></v-back>
    </el-dialog>
  </div>
</template>

<script>
import TanBack from './TanBack.vue'
import axios from "axios"
var Mock = require('mockjs');
var url;

export default {
  data (){
    return {
      radio:'',
      value:'',
      businessmenName:'',
      productName:'',
      commentTimeBegin:'',
      commentTimeEnd:'',
      pageIndex:1,
      pageSize:5,
      star:4,
      activeName:'one',
      options: [{
        value: '选项1',
        label: '选项1'
      }],
      goodsTab:1,
      checkAll: false,
      isIndeterminate: false,
      checkedArr:[]
    }
  },
  filters:{
    getDate:function (val){
      var date=new Date();
      date.setTime(val);
      var year = date.getFullYear();
      var month= date.getMonth()+1;
      if(month<10){
        month='0'+month;
      }
      var day=date.getDate();
      if(day<10){
        day='0'+day;
      }
      return year+"-"+month+"-"+day;
    },
    getTime:function (val){
      var date=new Date();
      date.setTime(val);
      var hours=date.getHours();
      if(hours<10){
        hours='0'+hours;
      }
      var minutes=date.getMinutes();
      if(minutes<10){
        minutes='0'+minutes;
      }
      return hours+":"+minutes
    }
  },
  methods:{
    //筛选按钮
    filter:function (){
      this.getList();
    },
    //选项卡切换事件
    handleTabsEdit:function (tab){
      this.checkedArr=[];
      this.checkAll=false;
      this.isIndeterminate=false;
      this.getList();
    },
    handleCheckAllChange(event) {
      let arr = [];
      this.checkedArr = event.target.checked ? this.$store.getters.evaluateListId : [];
      this.isIndeterminate = false;
    },
    handleCheckedArrChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.$store.getters.evaluateListId.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.$store.getters.evaluateListId.length;
    },
    handleCurrentChange:function (){
      this.getList();
    },
    changeDialog:function (type,id,json){
      var json1={
        'type':type,
        'name':'TanEvaluate',
        'id':id,
        'title':'客户回访',
        'detail':json
      }
      this.$store.dispatch('changeDialog',json1);
    },
    noNeedToReply:function() {
      this.postAction('/v1/comments/setNoNeedToReply');
    },
    setRecommend:function() {
      this.postAction('/v1/comments/setRecommend');
    },
    setHidden:function() {
      this.postAction('/v1/comments/setHidden');
    },
    getCheckedIds:function() {
      var ids = '';
      this.checkedArr.forEach(function(id) {
        ids += (id + ',');
      });
      if(ids == '') {
        return '';
      }
      return ids.substring(0, ids.length - 1);
    },
    postAction:function(actionUrl) {
      var that = this;
      var ids = this.getCheckedIds();
      if(ids == '') {
        alert('请选择评价记录');
        return;
      }
      var formData = new FormData();
      formData.append('ids', ids);
      axios.post(url+actionUrl, formData).then((res)=>{
        that.getList();
      }).catch((err)=>{
        console.log(err);
      });
    },
    getList:function (){
      var that=this;
      switch (that.activeName) {
        case 'one':
          var status=0;
          var lessThanStar=3;
          break;
        case 'two':
          var status='';
          var lessThanStar='';
          break;
        default:
      }
      this.$store.dispatch('getEvaluateList', {
        businessmenName:that.businessmenName,
        commentStatus:status,
        commentTimeBegin:that.commentTimeBegin ? Date.parse(that.commentTimeBegin) : '',
        commentTimeEnd:that.commentTimeEnd ? Date.parse(that.commentTimeEnd) : '',
        lessThanStar:lessThanStar,
        pageCount:that.pageSize,
        pageIndex:that.pageIndex,
        productName:that.productName,
        sort:'',
        star:that.star == 4 ? '' : that.star
      });
    }
  },
  components:{
    'v-back':TanBack
  },
  created(){
    url=this.$store.state.url;
    this.$store.state.index='5';

    this.getList();
  }
}
</script>
<style lang="Sass">
.evaluateBox{
  .el-checkbox__label{font-size: 13px;}
  .el-radio__label{font-size: 12px;}
  }
</style>
<style lang="Sass" scoped>
.evaluateBox{ min-height: 100%; height: auto; background: #F7F8FC;

  .headLable{width: 80px;}
  .goodsList{height: 40px; line-height: 40px; width: 80px; box-sizing: border-box; margin: 0 auto; cursor: pointer;}
  .goodsList:hover{border-bottom: 4px solid #13CE66;}
  .active{border-bottom: 4px solid #13CE66;}
  .warp{width: 100%; height: 100%;padding: 10px 10px 10px 10px; box-sizing: border-box;

    .formBox{ background: #fff; padding: 10px; text-align: left;

      .text{ height: 30px;
        .el-input__inner{height: 30px; width: 100%;}
      }
      .date{width: 150px; height: 30px;
        .el-input__inner{height: 30px; width: 100%;}
      }
      .select{width: 120px;
        .el-input__inner{width: 100%;}
      }
      .el-date-editor.el-input{width: 150px;}
      .redioBox{margin-top: 8px; margin-left: 10px;}
    }
    span{font-size: 12px; line-height: 30px;}
    .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px;}
    .box2{border-radius: 0 0 10px 10px; padding: 0px 10px 20px 10px;}
    .tableBox{background: #fff; padding: 20px; margin-top: 20px; border-radius: 10px;}
    .cell{text-align: left;}
    .btn{height: 32px;
      span{line-height: 0px;}
    }
    .listBox{width: 100%; background: #fff;

      .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 5px; background: #FAFAFC;
          span{display: inline-block; line-height: 30px; font-size: 12px;}
          .product{flex:0 0 200px;}
          .score{flex: 0 0 60px;}
          .content{flex:1;}
          .name{flex: 0 0 180px;}
          .customer{flex: 0 0 100px;}
          .recommend{flex: 0 0 50px;}
          .time{flex: 0 0 100px;}
          .numb{flex: 0 0 80px;}
          .operation{flex: 0 0 60px;}
      }
      li{display: flex; height: auto; line-height: 30px; text-align: left; padding: 15px 5px 0 5px;

        span{display: inline-block;  box-sizing: border-box; font-size: 12px; line-height: 16px;}
        .product{flex:0 0 200px; padding-right: 10px;}
        .score{flex: 0 0 60px;}
        .content{flex:1; padding-right: 10px;}
        .name{flex: 0 0 180px;}
        .customer{flex: 0 0 100px;
          p{font-size: 12px;}
        }
        .recommend{flex: 0 0 50px;}
        .time{flex: 0 0 100px;
          p{font-size: 12px;}
        }
        .numb{flex: 0 0 80px;}
        .operation{flex: 0 0 60px; cursor: pointer;}
      }
      li:nth-of-type(even){background: #FAFAFC;}
      .el-checkbox, .el-checkbox__input{white-space:normal; font-size: 12px;}
    }
  }

}
.bg-white{background: #fff;}
</style>
